<template>
  <div class="tamil-shop">
    <!-- 返回顶部 -->
    <back-top></back-top>
    <div>
      <img
        style="float: left; margin-bottom: 20px"
        src="https://gw.alicdn.com/imgextra/i1/O1CN01obvh6l1iRpMLSol1z_!!6000000004410-2-tps-214-68.png_110x10000.jpg_.webp"
        alt=""
      />
    </div>
     <!-- 天猫超市 -->
    <div class="container">
      <div
        class="card"
        @click="ToDetali(item)"
        style="width: 220px"
        v-for="item in data"
        :key="item"
      >
        <img
          class="card-img-top"
          :src="item.cover_url"
          alt="Card image"
          style="width: 100%"
        />
        <div class="card-body">
          <p class="card-text">
            {{ item.title }}
          </p>
          <h4><span>￥</span>{{ item.price }}</h4>
        </div>
      </div>
    </div>
    <div>
      <img
        style="float: left; margin-bottom: 20px; margin-top: 30px"
        src="https://gw.alicdn.com/imgextra/i1/O1CN01DWQY2W1U1LqMYx8RJ_!!6000000002457-2-tps-214-68.png_110x10000.jpg_.webp"
        alt=""
      />
    </div>
    <div class="container">
      <!-- 天猫国际  -->
      <div
        class="card"
        style="width: 220px"
        v-for="items in international"
        :key="items"
        @click="ToDetali(items)"
      >
        <img
          class="card-img-top"
          :src="items.cover_url"
          alt="Card image"
          style="width: 100%"
        />
        <div class="card-body">
          <p class="card-text">
            {{ items.title }}
          </p>
          <h4><span>￥</span>{{ items.price }}</h4>
        </div>
      </div>
    </div>
    <div class="title">
      <span
        ><h5>猜你喜欢 <span class="badge bg-danger">个性推荐</span></h5></span
      >
    </div>
    <div class="container">
      <!-- 猜你喜欢  -->
      <div
        @click="ToDetali(itemss)"
        class="card"
        style="width: 220px"
        v-for="itemss in like"
        :key="itemss"
      >
        <img
          class="card-img-top"
          :src="itemss.cover_url"
          alt="Card image"
          style="width: 100%"
        />
        <div class="card-body">
          <p class="card-text">
            {{ itemss.title }}
          </p>
          <h4><span>￥</span>{{ itemss.price }}</h4>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BackTop from "components/content/backTop/BackTop.vue";
import { useStore } from "vuex";
import { ref } from "vue";
import { useRouter } from "vue-router";
export default {
  components: { BackTop },
  setup(props) {
    //使用状态管理
    let store = useStore();
    //使用路由
    let router = useRouter();
    //console.log(store.state.goods);
    //天猫超市商品
    const data = ref([]);
    data.value = store.state.goods.data;
    //天猫国际商品
    const international = ref([]);
    international.value = store.state.goods.international;

    //猜你喜欢
    const like = ref([]);
    like.value = store.state.goods.like;

    //跳转
    const ToDetali = (item) => {
      router.push({
        path: "/detail",
        query: item,
      });
    };
    return {
      ToDetali,
      data,
      international,
      like,
    };
  },
};
</script>

<style scoped>
@import "assets/css/ShopcardView.css";

</style>